<template>
  <div>
    <div class="condition">
      <div class="condition-text" v-for="(item,index) in conditions" :key="index" @click="onChange(item,index)"
           v-bind:class="{back:index==isActive,change_back:index!=isLine}">
        <span>{{ item }}</span>
      </div>
      <Icon type="ios-refresh" size="25" style="float:right; cursor: pointer; margin-left: 10px;"
            @click.native="refresh"/>
      <Icon type="ios-qr-scanner" size="25" title="全屏" style="float:right; cursor: pointer; margin-left: 10px;"
            @click.native="fullScreen"/>
    </div>
    <div class="line-main"
         id="box"
         ref="chartDom">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import {statApi} from '@/api/stat';
import tdTheme from './theme.json';
import {on, off} from '@/lib/util';

echarts.registerTheme('tdTheme', tdTheme);
export default {
  data() {
    return {
      lineData: [],
      isActive: false,
      isLine: false,
      conditions: ['近7天', '近30天'],
      chartDom: null
    }
  },
  props: {
    value: Object,
    text: String,
    subtext: String
  },
  watch: {
    lineData: {
      handler(newVal, oldVal) {
        if (this.chartDom) {
          if (newVal) {
            this.setOption(newVal);
          } else {
            this.setOption(oldVal);
          }
        } else {
          this.initChart();
        }
      }, deep: true
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    onChange(item, index) {
      this.isActive = index;
      this.isLine = index;
      let timeType = 0;
      switch (index) {
        case 0:
          timeType = 1;
          break;
        case 1:
          timeType = 2;
          break;
      }
      this.getData(timeType)
    },
    async getData(timeType) {
      try {
        let param = {
          dateType: timeType
        }
        statApi.queryDisassembleAndEligible(param)
          .then((res) => {
            if (res.code === 1) {
              this.lineData = res.data;
            }
          })
      } catch (e) {
        console.error(e);
      } finally {
      }
    },
    resize() {
      this.chartDom.resize();
    },
    initChart() {
      this.$nextTick(() => {
        let option = this.getOption();
        this.chartDom = echarts.init(this.$refs.chartDom, 'tdTheme');
        this.chartDom.setOption(option);
        on(window, 'resize', this.resize);
      });
    },
    setOption(value) {
      this.$nextTick(() => {
        let option = this.getOption(value);
        this.chartDom.setOption(option);
      })
    },
    getOption() {
      let xAxisData = this.lineData.xaxisData;
      let seriesData1 = this.lineData.chartLineSerieList.find(e => e.name === '拆解数').data;
      let seriesData2 = this.lineData.chartLineSerieList.find(e => e.name === '不良数').data;
      let domName = document.getElementById('box');
      let option = {
        grid: {
          left: '1%',
          right: '2%',
          top: '2%',
          bottom: '15%',
          containLabel: true
        },
        color: ['#80FFA5', '#00DDFF'],
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          //formatter: '{c}人',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          position: 'top',
          //backgroundColor: '#387DE1',
          textStyle: {
            fontSize: 18,
            color: '#fff'
          }
        },
        legend: {
          data: this.lineData.legendList,
          orient: 'horizontal',
          icon: 'square',
          x: 'center',      //可设定图例在左、右、居中
          y: 'bottom'     //可设定图例在上、下、居中
        },
        xAxis: {
          // show: false,
          type: 'category',
          data: xAxisData,
          boundaryGap: false,
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '拆解数',
            type: 'line',
            //stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesData1
          },
          {
            name: '不良数',
            type: 'line',
            //stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesData2
          }]
      };
      return option;
    },
    refresh() {
      this.getData();
    },
    fullScreen() {
      let domName = document.getElementById('box');

      // 全屏查看
      if (domName.requestFullScreen) { // HTML W3C 提议
        domName.requestFullScreen()
      } else if (domName.msRequestFullscreen) { // IE11
        domName.msRequestFullScreen()
      } else if (domName.webkitRequestFullScreen) { // Webkit
        domName.webkitRequestFullScreen()
      } else if (domName.mozRequestFullScreen) { // Firefox
        domName.mozRequestFullScreen()
      }
      // 退出全屏
      if (domName.requestFullScreen) {
        document.exitFullscreen()
      } else if (domName.msRequestFullScreen) {
        document.msExitFullscreen()
      } else if (domName.webkitRequestFullScreen) {
        document.webkitCancelFullScreen()
      } else if (domName.mozRequestFullScreen) {
        document.mozCancelFullScreen()
      }
    }
  }
};
</script>

<style lang='less'>
.line-main {
  width: 100%;
  height: 360px;
  padding: 28px;
  background: #fff;
}

.back {
  background-color: rgb(49, 167, 255);
  color: #fff;
}

.change_back {
  color: #31a7ff;
}

.condition {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  float: right;

  .condition-text {
    cursor: pointer;
    width: 60px;
    height: 30px;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    border-color: rgb(49, 167, 255);

    span {
      font-size: 12px;
      font-weight: 400;
      line-height: 30px;
    }
  }
}
</style>
